<template>
  <div class="page-wrapper">
    <!-- 筛选表头 -->
    <el-form label-width="80px" inline>
      <el-form-item label="员工名字">
        <el-input
          placeholder="搜索内容"
          prefix-icon="el-icon-search"
          v-model.trim="search.stf_name"
          @input="delayGetStaff"
        ></el-input>
      </el-form-item>
      <el-form-item label="员工类型">
        <el-select v-model="search.stf_category" @change="getStaff(true)">
          <el-option label="·所有类型·" :value="0"> </el-option>
          <el-option
            v-for="(item, index) in dictionary.filter(
              (category) => category.dic_group_key === 'staff_category'
            )"
            :key="index"
            :label="item.dic_name"
            :value="item.dic_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btn-wrap">
        <el-button type="primary" icon="el-icon-plus" @click.native="beforeAdd"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 显示列表 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
      stripe
      border
      highlight-current-row
    >
      <el-table-column label="#" width="50" align="center" type="index">
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.stf_name }}</p>
            <p>职务类型: {{ scope.row.stf_category }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.stf_name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="职务类型" width="120" align="right">
        <template slot-scope="{ row }">
          <div slot="reference" class="name-wrapper">
            <el-tag type="success" size="medium">{{
              dictionary.length > 0
                ? dictionary.find((item) => item.dic_id === row.stf_category)
                    .dic_name
                : ""
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="{ row }">
          <div slot="reference" class="name-wrapper">
            <el-tag v-if="row.stf_remark" type="warning" size="medium">{{
              row.stf_remark
            }}</el-tag>
            <span v-else style="color:#ccc">暂无相关备注...</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="员工状态" width="120" align="center">
        <template slot-scope="{ row }">
          <div slot="reference" class="name-wrapper">
            <span :class="{ active: !row.stf_invalid }">
              {{ row.stf_invalid ? "在职" : "离职" }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click.native="beforeUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.stf_invalid"
            size="mini"
            type="danger"
            @click.native="dimission(scope.$index, scope.row)"
            >离职</el-button
          >
          <el-button
            v-else
            size="mini"
            type="warning"
            @click.native="reinstate(scope.$index, scope.row)"
            >入职</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next,jumper,->,sizes,total"
      :total="pagination.total"
      :page-sizes="[5, 8, 10, 12, 15]"
      :page-size.sync="pagination.pageSize"
      :current-page.sync="pagination.currentPage"
      @current-change="getStaff(false)"
      @size-change="getStaff(true)"
    >
    </el-pagination>
    <!-- 弹出对话框 -->
    <el-dialog :visible.sync="editor.isEditor" width="40%" :modal="false">
      <p slot="title" class="title" :class="{ active: editor.isMode }">
        员工维护-{{ editor.isMode ? "新增" : "修改" }}
      </p>
      <el-form
        label-width="80px"
        ref="ruleForm"
        :model="editor.mode"
        :rules="editor.rules"
      >
        <el-form-item label="员工名字" prop="stf_name">
          <el-input
            v-model.trim="editor.mode.stf_name"
            placeholder="请输入员工的名子"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工类型" prop="stf_category">
          <el-select
            v-model="editor.mode.stf_category"
            placeholder="请输入员工类型"
          >
            <el-option
              v-for="(item, index) in dictionary.filter(
                (category) => category.dic_group_key === 'staff_category'
              )"
              :key="index"
              :label="item.dic_name"
              :value="item.dic_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工备注">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入员工备注..."
            v-model="editor.mode.stf_remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveInfo">保存</el-button>
        <el-button @click="editor.isEditor = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Staff",
  data() {
    return {
      search: {
        stf_name: '',
        stf_category: 0,
      },
      timer: null,
      pagination: {
        total: 0,
        pageSize: 5,
        currentPage: 1,
      },
      list: [],
      dictionary: [],
      editor: {
        isEditor: false,
        isMode: true,
        mode: {
          stf_name: "",
          stf_category: "",
          stf_remark: "",
        },
        rules: {
          stf_name: [
            { required: true, message: "请输入员工名称", trigger: "blur" },
          ],
          stf_category: [
            { required: true, message: "请选择员工类型", trigger: "change" },
          ],
        },
      },
    };
  },
  created() {
    // 请求所有员工数据
    this.getStaff(true);
    //请求所有职务类型
    this.getDictionary();
  },
  methods: {
    initForm() {
      if (this.$refs.ruleForm) this.$refs.ruleForm.resetFields();
    },
    beforeAdd() {
      // 初始化表单
      this.initForm();
      // 开始新增
      this.editor.mode.stf_name = "";
      this.editor.mode.stf_category = "";
      this.editor.mode.stf_remark = "";
      this.editor.isMode = true;
      this.editor.isEditor = true;
    },
    beforeUpdate(index, row) {
      // 初始化表单
      this.initForm();
      // 开始修改
      this.editor.isMode = false;
      this.editor.isEditor = true;

      console.log(row);
      this.editor.mode.stf_name = row.stf_name;
      this.editor.mode.stf_category = row.stf_category;
      this.editor.mode.stf_remark = row.stf_remark;
      this.editor.mode.stf_id = row.stf_id;
      this.editor.mode.stf_invalid = row.stf_invalid;
    },
    saveInfo() {
      // 保存
      this.$refs.ruleForm
        .validate()
        .then(() => {
          // 验证成功
          if (this.editor.isMode) {
            // 新增状态
            this.$http({
              url: "/staff/add",
              method: "post",
              data: {
                ...this.editor.mode,
              },
            }).then((stf_id) => {
              // 新增成功
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.editor.mode.stf_id = stf_id;
              this.list.push({ ...this.editor.mode, stf_invalid: 1 });
            });
          } else {
            // 编辑状态
            this.$http({
              url: "/staff/update",
              method: "post",
              data: {
                ...this.editor.mode,
              },
            }).then(() => {
              // 修改成功
              this.$message({
                type: "success",
                message: "修改成功",
              });

              this.list.splice(
                this.list.findIndex(
                  (item) => item.stf_id === this.editor.mode.stf_id
                ),
                1,
                { ...this.editor.mode }
              );
            });
          }
          this.editor.isEditor = false;
        })
        .catch((err) => {
          //验证失败
          console.log(err);
        });
    },
    delayGetStaff() {
      // 输入框查询
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getStaff(true);
      }, 1000);
    },
    // 请求所有员工数据
    getStaff(isInit = ture) {
      if (isInit) {
        this.pagination.currentPage = 1;
      }
      this.$http({
        url: "/staff/list",
        method: "post",
        data: {
          ...this.search,
          begin: (this.pagination.currentPage - 1) * this.pagination.pageSize,
          pageSize: this.pagination.pageSize,
        },
      }).then((res) => {
        console.log("所有员工:", res);
        const { total, list } = res;
        this.list = list;
        this.pagination.total = total;
      });
    },
    // 请求所有职务类型
    getDictionary() {
      this.$http({
        url: "/dictionary/all",
        method: "get",
      }).then((res) => {
        console.log("所有字典数据:", res);
        this.dictionary = res;
      });
    },
    reinstate(index, row) {
      // 入职
      console.log(row);
      this.$confirm("确定要入职吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          this.$http({
            url: `/staff/reinstate/${row.stf_id}`,
            method: "get",
          }).then(() => {
            this.list.find(item => item.stf_id === row.stf_id).stf_invalid = 1;
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    dimission(index, row) {
      // 离职
       this.$confirm("确定要离职吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: `/staff/dimission/${row.stf_id}`,
            method: "get",
          }).then(() => {
            this.list.find(item => item.stf_id === row.stf_id).stf_invalid = 0;
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
.page-wrapper
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  display flex
  flex-direction column
  .el-form
    flex-shrink 0
    .el-form-item
      &.btn-wrap
        float right
  .el-table
    flex-grow 1
    .name-wrapper
      .active
        color red
  .el-pagination
    flex-shrink 0
  .el-dialog
    .title
      padding 10px 30px
      font-size 18px
      color white
      background-color #F56C6C
      &.active
        background-color #67C23A
</style>
